import { StyleSheet, Text, View, ScrollView, Image } from 'react-native'
import React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import Page1 from './Page1'
import Page2 from './Page2'

const Tab = createBottomTabNavigator()
// const Tab = createMaterialBottomTabNavigator();

export default function Home(props) {
    return (
        <Tab.Navigator
        // screenOptions={(route) => ({
        //     tabBarIcon: ()
        // })}
        // tabBarOptions={{
        //     activeTintColor: 'tomato',
        //     inactiveTinitColor: 'gray'
        // }}
        >
            <Tab.Screen
                name="page1"
                component={Page1}
                options={{
                    tabBarLabel: '页面1',
                    tabBarBadge: 3,
                    tabBarIcon: ({ focused, size, color }) => {
                        // console.log('focused,size,color', focused, size, color);
                        if (!focused) {
                            return (
                                <Image source={require('../img/shouye-nav.png')}
                                    style={styles.selectedIconStyle} />
                            )
                        } else {
                            return (
                                <Image source={require('../img/shouye-2.png')}
                                    style={styles.selectedIconStyle} />
                            )
                        }

                    },
                }}
            />
            <Tab.Screen
                name="page2"
                component={Page2}
                options={{
                    tabBarLabel: '页面2',
                    tabBarBadge: 2,
                    tabBarIcon: ({ focused, size, color }) => {
                        if (!focused) {
                            return (
                                <Image source={require('../img/xietong-nav.png')}
                                    style={styles.selectedIconStyle} />
                            )
                        } else {
                            return (
                                <Image source={require('../img/xietong-2.png')}
                                    style={styles.selectedIconStyle} />
                            )
                        }
                    }
                }}
            />
        </Tab.Navigator>
    )
}

const styles = StyleSheet.create({
    // TabNavigator: {
    //     bottom: 0,
    //     backgroundColor: 'red',
    //     color: 'red'
    // },
    selectedIconStyle: {
        width: 24,
        height: 24,
    },
})